<template>
<div>
    <div class="box" :class="{'box-bg':visible}"> </div>
    <my-button @click="visible = !visible ">点击变化颜色和大小</my-button>
</div>
</template>
<script>
import MyButton from '../lesson8/myButton.vue';
export default{
    components:{
        MyButton
    },
    data(){
        return{
            visible:false
        };
    }
};
</script>
<style scoped>
.box{
    width: 200px;
    height: 200px;
    margin: 20px;
    background: red;
    transition: all 1s;
}
.box-bg{
    width: 400px;

    background: green;
width:400px;
height: 300px;
}
</style>